<template>
  <el-upload
    ref="uploadRef"
    :class="objClass"
    :action="action"
    :file-list="fileList"
    :list-type="listType"
    :show-file-list="showFileList"
    :auto-upload="autoUpload"
    :limit="limit"
    :disabled="disabled"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :on-remove="handleRemove"
  >
    <el-icon>
      <Plus />
    </el-icon>
    <template #tip>
      <div class="el-upload__tip">
        {{ tip }}
      </div>
    </template>
  </el-upload>
</template>
<script setup lang="ts">
import type { UploadProps } from "element-plus";
import { ElMessage } from "element-plus";
import { ref, watch } from "vue";
const props = defineProps({
  //是否自动上传文件
  autoUpload: {
    type: Boolean,
    default: true,
  },
  //是否显示已上传文件列表
  showFileList: {
    type: Boolean,
    default: true,
  },
  //允许上传文件的最大数量
  limit: {
    type: Number,
    default: 1,
  },
  //是否禁用上传
  disabled: {
    type: Boolean,
    default: false,
  },
  //文件列表的类型 'text' | 'picture' | 'picture-card'
  listType: {
    type: String,
    default: "picture-card",
  },
  //默认上传文件
  fileList: {
    type: Array,
    default: [],
  },
  //下标提示
  tip: {
    type: String,
    default: "图片格式是jpg/png单张图片大小4M 64*64",
  },
  //请求 URL
  action: {
    type: String,
    default: import.meta.env.VITE_SERVER + "/files/upload",
  },
});
//监听值的变化
watch(props.fileList, () => {
  if (props.fileList.length > 0) {
    objClass.value.upLoadShow = false;
    objClass.value.upLoadHide = true;
  } else {
    objClass.value.upLoadShow = true;
    objClass.value.upLoadHide = false;
  }
});
const $emit = defineEmits(["handleSuccess"]);
const objClass = ref({
  upLoadShow: true,
  upLoadHide: false,
});
//图片上传成功的钩子
const handleSuccess: UploadProps["onSuccess"] = (res, fileList) => {
  if (res.code == 200) {
    ElMessage.success("上传成功！");
    const file = {
      name: fileList.name,
      percentage: fileList.percentage,
      raw: fileList.raw,
      size: fileList.size,
      status: fileList.status,
      uid: fileList.uid,
      url: import.meta.env.VITE_SERVER + "/upload/" + res.data.filePath,
    };
    $emit("handleSuccess", file);
    objClass.value.upLoadShow = false;
    objClass.value.upLoadHide = true;
  } else {
    ElMessage.error("上传失败");
    objClass.value.upLoadShow = true;
    objClass.value.upLoadHide = false;
  }
};
//图片移除钩子
const handleRemove: UploadProps["onRemove"] = () => {
  $emit("handleSuccess", {});
  objClass.value.upLoadShow = true;
  objClass.value.upLoadHide = false;
};
//上传图片组件->上传图片之前触发的钩子函数
const beforeUpload: UploadProps["beforeUpload"] = async (rawFile: any) => {
  //上传图片格式和大小要求  png|jpg  4M
  const isJPG = rawFile.type === "image/jpg" || rawFile.type === "image/png";
  const isLt2M = rawFile.size / 1024 / 1024 < 4;
  if (!isJPG) {
    ElMessage.error("上传文件格式务必PNG|JPG");
  }
  if (!isLt2M) {
    ElMessage.error("上传文件大小小于4M");
  }
  return isJPG && isLt2M;
};
</script>
<style scoped lang="scss">
.el-upload__tip {
  color: #cdd0d6;
}

/*当upLoadShow为true时，启用如下样式，即上传框的样式，若为false则不启用该样式*/
.upLoadShow ::v-deep(.el-upload, .is-success) {
  width: 100px !important;
  height: 100px !important;
  line-height: 100px !important;
}

.upLoadShow ::v-deep(.el-upload-list__item) {
  width: 100px !important;
  height: 100px !important;
  line-height: 100px !important;
}

/*当upLoadHide为true时，启用如下样式，即缩略图的样式，若为false则不启用该样式*/
.upLoadHide ::v-deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 100px !important;
  height: 100px !important;
  line-height: 100px !important;
}

/*当upLoadHide为true时，启用如下样式，即上传框的样式，若为false则不启用该样式*/
.upLoadHide ::v-deep(.el-upload) {
  display: none;
}
</style>
